<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生知识管理系统</title>
    <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#6B7280',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        info: '#3B82F6',
                        dark: '#1F2937',
                        light: '#F3F4F6'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-link {
                @apply flex items-center px-4 py-3 text-gray-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-link.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .nav-shadow {
                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            }
            .cursor-pointer {
                cursor: pointer;
            }
        }
    </style>
</head>

<body class="font-inter bg-gray-50 text-gray-800">
    <div class="flex h-screen overflow-hidden">
        <!-- 固定侧边栏 -->
        <div class="w-64 bg-white shadow-lg z-20 h-screen fixed top-0 left-0">
            <div class="p-4 border-b border-gray-200">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-cogs text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-primary">学生知识管理系统</h1>
                </div>
            </div>
            <div class="p-4">
                <div class="mb-6">
                    <div class="flex items-center space-x-3">
                        <img src="https://picsum.photos/id/1005/40/40" alt="用户头像"
                            class="rounded-full w-10 h-10 object-cover border-2 border-primary" id="sidebarAvatar">
                        <div>
                            <p class="font-medium" id="sidebarUsername">管理员</p>
                        </div>
                    </div>
                </div>
                <ul class="space-y-1">
                    <li><a href="#" class="sidebar-link active" data-src="/hou/dashborad.html"><i
                                class="fa fa-home w-6"></i> <span>首页</span></a></li>
                    <li><a href="#" class="sidebar-link" data-src="/hou/articles/articles.html"><i
                                class="fa fa-file-text-o w-6"></i> <span>文章管理</span></a></li>
                    <li><a href="#" class="sidebar-link" data-src="/hou/tags/tags.html"><i
                                class="fa fa-file-text-o w-6"></i> <span>类别管理</span></a></li>
                    <li><a href="#" class="sidebar-link" data-src="/hou/comments/comments.html"><i
                                class="fa fa-comments-o w-6"></i> <span>评论管理</span></a></li>
    
                    <li><a href="#" class="sidebar-link" data-src="/hou/user/users.html"><i
                                class="fa fa-users w-6"></i> <span>用户管理</span></a></li>
                   
                    <li><a href="#" class="sidebar-link has-submenu" data-src="/hou/points/points.html"><i
                                class="fa fa-star w-6"></i> <span>积分管理</span></a></li>
                    <!-- 积分管理的子列表 -->
                    <ul class="ml-4 space-y-1 hidden" id="pointsSubmenu">
                        <li><a href="#" class="sidebar-link" data-src="/hou/points/point_rules.html"><i class="fa fa-file-text-o w-6"></i> <span>积分规则管理</span></a></li>
                        <li><a href="#" class="sidebar-link" data-src="/hou/points/user_points.html"><i class="fa fa-users w-6"></i> <span>用户积分管理</span></a></li>
                        <li><a href="#" class="sidebar-link" data-src="/hou/points/point_records.html"><i class="fa fa-list-alt w-6"></i> <span>积分记录管理</span></a></li>
                    </ul>

                    <li><a href="#" class="sidebar-link has-submenu" data-src="personal.html"><i
                                class="fa fa-user w-6"></i> <span>个人设置</span></a></li>
                    <!-- 个人管理的子列表 -->
                    <ul class="ml-4 space-y-1 hidden" id="personalSubmenu">
                        <li><a href="#" class="sidebar-link" data-src="/hou/setting/password.html"><i class="fa fa-lock w-6"></i> <span>密码修改</span></a></li>
                        <li><a href="#" class="sidebar-link" data-src="/hou/setting/user_profile.html"><i class="fa fa-id-card w-6"></i> <span>个人简介</span></a></li>
                    </ul>
                    
                </ul>
                <div class="mt-8 pt-4 border-t border-gray-200">
                    <h5 class="text-xs uppercase text-gray-400 font-semibold mb-3 px-4">帮助与支持</h5>
                    <ul class="space-y-1">
                        <li><a href="#" class="sidebar-link"><i
                                    class="fa fa-question-circle w-6"></i><span>帮助中心</span></a></li>
                        <li><a href="#" class="sidebar-link"><i class="fa fa-life-ring w-6"></i><span>联系我们</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 右侧内容区域 -->
        <div class="flex-1 flex flex-col overflow-hidden ml-64">
            <!-- 顶部导航栏 -->
            <header class="bg-white nav-shadow z-10">
                <div class="container-fluid px-4 py-3 flex items-center justify-between">
                    <div class="flex items-center">
                        <h2 class="text-lg font-semibold" id="pageTitle">仪表盘</h2>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- 前往 StudentHub 按钮 -->
                        <a href="/qian/home.html" class="px-3 py-2 rounded-md text-white bg-primary hover:opacity-90 transition-colors">
                            前往 StudentHub
                        </a>
                        <div class="relative" id="notificationIcon">
                            <button class="text-gray-500 hover:text-primary transition-colors">
                                <i class="fa fa-bell text-xl"></i>
                                <span
                                    class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
                            </button>
                        </div>
                        <div class="relative" id="emailIcon">
                            <button class="text-gray-500 hover:text-primary transition-colors">
                                <i class="fa fa-envelope text-xl"></i>
                                <span
                                    class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">5</span>
                            </button>
                        </div>
                        <div class="hidden md:flex items-center space-x-2 relative cursor-pointer" id="userDropdownToggle">
                            <img src="https://picsum.photos/id/1005/32/32" alt="用户头像"
                                class="rounded-full w-8 h-8 object-cover" id="navbarAvatar">
                            <span class="font-medium" id="navbarUsername">管理员</span>
                            <i class="fa fa-angle-down text-gray-500"></i>
                            <!-- 下拉菜单 -->
                            <div id="userDropdownMenu" class="absolute right-0 top-full mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-30 hidden">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" id="logoutButton">退出</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- 主体内容iframe -->
            <main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
                <iframe id="contentFrame" class="w-full h-[calc(100vh-64px)] bg-gray-50 rounded-xl shadow-md border-0" src="/hou/dashborad.html"></iframe>
            </main>
        </div>
    </div>

    <!-- 移动端侧边栏遮罩 -->
    <!--<div class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden" id="sidebarOverlay"></div>-->
<script src="/jquery-3.7.1.min.js"></script>
    <script>
        // Function to update user info from sessionStorage
        function updateUserInfo() {
            const userId = sessionStorage.getItem('userId');
            const username = sessionStorage.getItem('username');
            const avatarFilename = sessionStorage.getItem('avatarUrl'); // This is now just the filename

            if (userId && username && avatarFilename) {
                const avatarBaseUrl = 'http://localhost:8082/upload/';
                const avatarUrl = avatarBaseUrl + avatarFilename;

                // Update sidebar user info
                $('#sidebarAvatar').attr('src', avatarUrl);
                $('#sidebarUsername').text(username);
                // Remove email in sidebar
                $('#sidebarUsername').next('p').remove();

                // Update navbar user info
                $('#navbarAvatar').attr('src', avatarUrl);
                $('#navbarUsername').text(username);
            } else {
                 // If no user info in sessionStorage, redirect to login page
                 window.location.href = '/login.html';
            }
        }

        // Call updateUserInfo when the page loads
        $(document).ready(function() {
             updateUserInfo();

            // Remove notification and email icons from navbar
            $('#notificationIcon').remove();
            $('#emailIcon').remove();

            // Toggle user dropdown menu
            $('#userDropdownToggle').on('click', function() {
                $('#userDropdownMenu').toggleClass('hidden');
            });

            // Hide dropdown when clicking outside
            $(document).on('click', function(event) {
                if (!$(event.target).closest('#userDropdownToggle').length) {
                    $('#userDropdownMenu').addClass('hidden');
                }
            });

            // Logout button click handler
            $('#logoutButton').on('click', function(e) {
                e.preventDefault(); // Prevent default link behavior
                // Clear sessionStorage
                sessionStorage.removeItem('userId');
                sessionStorage.removeItem('username');
                sessionStorage.removeItem('userRole');
                sessionStorage.removeItem('avatarUrl');
                // Redirect to login page
                window.location.href = '/login.html';
            });

            // 侧边栏菜单点击切换iframe内容
            const sidebarLinks = document.querySelectorAll('.sidebar-link');
            const contentFrame = document.getElementById('contentFrame');
            const pageTitle = document.getElementById('pageTitle');
            const pageMap = {
                'dashboard.html': '仪表盘',
                'articles.html': '文章管理',
                'tags.html': '类别管理',
                'users.html': '用户管理',
                'points.html': '积分管理',
                'point_rules.html': '积分规则管理',
                'user_points.html': '用户积分管理',
                'point_records.html': '积分记录管理',
                'personal.html': '个人设置',
                'password.html': '密码修改',
                'user_profile.html': '个人简介',
                'comments.html': '评论管理'

            };

            sidebarLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    // 如果是带有子菜单的链接
                    if (this.classList.contains('has-submenu')) {
                        e.preventDefault(); // 阻止默认链接行为
                        const submenuId = this.dataset.src === '/hou/points/points.html' ? 'pointsSubmenu' : 'personalSubmenu';
                        const submenu = document.getElementById(submenuId);
                        submenu.classList.toggle('hidden'); // 切换子菜单的显示/隐藏
                        this.classList.toggle('expanded');
                    } else if (this.dataset.src) { // 如果是普通链接 (子菜单项或其他)
                        e.preventDefault(); // 阻止默认链接行为
                        sidebarLinks.forEach(l => l.classList.remove('active'));
                        this.classList.add('active');
                        const src = this.dataset.src;
                        contentFrame.src = src;
                        pageTitle.textContent = pageMap[src] || '';
                    }
                });
            });
        });
    </script>

</body>

</html>